<template>
<div class="pa-3">
  <v-row>
    <v-col cols="4">
      <v-text-field hide-details dense solo-inverted label="商品名称" v-model="name"></v-text-field>
    </v-col>
    <v-col cols="4">
      <v-select solo-inverted dense
                label="商品类别"
                :items="goodsCategoryList"
                v-model="selectedGoodsCategory"
                return-object
                item-text="name"
                v-show="!isAdmin"
      ></v-select>
    </v-col>
    <v-col cols="2">
      <v-btn color="primary" @click="getGoodsList">搜索</v-btn>
    </v-col>
    <v-col cols="2" v-show="!isAdmin">
      <v-btn color="success" @click="openEditGoods">新增</v-btn>
    </v-col>
  </v-row>
  <br/>
  <div>
    <v-simple-table>
      <thead>
      <tr>
        <th>商品名称</th>
        <th>商品类别</th>
        <th>商品单价</th>
        <th>店铺名称</th>
        <th>商品描述</th>
        <th>图片</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="goods in goodsList" :key="goods.id">
        <td>{{goods.name}}</td>
        <td>{{goods.goodsCategoryName}}</td>
        <td>{{goods.price/100}}</td>
        <td>{{goods.businessName}}</td>
        <td>{{goods.details}}</td>
        <td class="py-1">
          <v-avatar size="50" tile>
            <v-img :src="goods.image"/>
          </v-avatar>
        </td>
        <td>
          <v-btn text @click="openStateDialog(goods)" v-show="!isAdmin">口味</v-btn>
          <v-btn text color="primary" @click="openEditGoods(goods)" v-show="!isAdmin">修改</v-btn>
          <v-btn text color="error" @click="openDeleteDialog(goods)">删除</v-btn>
        </td>
      </tr>
      </tbody>
    </v-simple-table>
    <v-pagination
        v-model="pageNum"
        class="my-4"
        :length="totalPage"
    ></v-pagination>
  </div>

  <v-dialog v-model="deleteDialog" width="400">
    <v-card>
      <v-card-title>确定要删除吗？</v-card-title>
      <v-card-actions>
        <v-spacer/>
        <v-btn color="error" @click="handleDeleteGoods">删除</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <v-dialog v-model="stateDialog" width="400">
    <v-card>
      <v-card-title>添加口味</v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="8">
            <v-text-field dense outlined label="添加口味" v-model="stateForm.name"/>
          </v-col>
          <v-col cols="4">
            <v-btn color="primary" @click="handleAddState">新增</v-btn>
          </v-col>
          <v-col cols="12">
            <v-list dense>
              <v-list-item v-for="state in stateList" :key="state.id">
                <v-list-item-content>{{state.name}}</v-list-item-content>
                <v-list-item-action>
                  <v-btn outlined color="error" @click="handleDeleteState(state.id)">删除</v-btn>
                </v-list-item-action>
              </v-list-item>
            </v-list>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-dialog>
</div>
</template>

<script>
import {
  deleteGoodsById, deleteState,
  insertState,
  selectGoodsCategory,
  selectGoodsList,
  selectStateListByGoodsId
} from "../../http/api/goods";

export default {
  name: "Index",
  data:()=>({
    goodsCategoryList:[],
    goodsList:[],
    selectedGoodsCategory:null,
    name:null,
    pageNum:1,
    pageSize:10,
    totalPage:0,
    deleteDialog:false,
    deleteGoods:{},
    stateDialog:false,
    stateList:[],
    stateForm:{}
  }),
  computed:{
    loginUser(){
      return this.$store.state.user.userInfo
    },
    isAdmin(){
      return this.$store.state.user.userInfo.phone === 'admin';
    }
  },
  watch:{
    pageNum(val){
      this.getGoodsList()
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      this.initSelection();
      this.getGoodsList();
    },
    initSelection(){
      selectGoodsCategory().then(res=>{
        this.goodsCategoryList = res.data
      })
    },
    getGoodsList(){
      let categoryId = null
      if (this.selectedGoodsCategory){
        categoryId = this.selectedGoodsCategory.id
      }
      selectGoodsList(this.name,categoryId,this.pageNum,this.pageSize).then(res=>{
        this.goodsList = res.data.list
        this.totalPage = res.data.pages
      })
    },
    openDeleteDialog(goods){
      this.deleteDialog = true
      this.deleteGoods = goods
    },
    handleDeleteGoods(){
      deleteGoodsById(this.deleteGoods.id).then(res=>{
        this.$breadstick.notify(res.data)
        this.deleteDialog = false
        this.getGoodsList()
      })
    },
    openEditGoods(goods){
      if (goods){
        this.$router.push({
          path:'/business/editGoods',
          query:{
            goodsId:goods.id
          }
        })
      }else {
        this.$router.push('/business/editBusiness')
      }
    },
    openStateDialog(goods){
      selectStateListByGoodsId(goods.id).then(res=>{
        this.stateList = res.data
        this.stateDialog = true
        this.stateForm.goodsId = goods.id
      })
    },
    refreshState(goodsId){
      selectStateListByGoodsId(goodsId).then(res=>{
        this.stateList = res.data
      })
    },
    handleAddState(){
      insertState(this.stateForm).then(res=>{
        this.$breadstick.notify(res.data)
        this.refreshState(this.stateForm.goodsId)
      })
    },
    handleDeleteState(id){
      deleteState(id).then(res=>{
        this.$breadstick.notify(res.data)
        this.refreshState(this.stateForm.goodsId)
      })
    }
  }
}
</script>

<style scoped>

</style>